<template>
  <div class="container">
    <el-card>
      <!-- 搜索框 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="6" style="text-align: center">
          <span class="grid-content bg-purple">关键字</span>
          <el-input
            placeholder="根据编号搜索"
            size="small"
            style="width: 200px"
            v-model="searchId"
          ></el-input>
        </el-col>
        <el-col :span="6" :offset="12" style="text-align: right">
          <el-button size="small" @click="resetInput">清除</el-button>
          <el-button type="primary" size="small" @click="searchById"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <!-- 数量提示条 -->
      <el-row style="width: 100%">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <i class="el-icon-info"></i>
            <span class="totalSpan">数据一共 {{ total }} 条</span>
          </div></el-col
        >
      </el-row>
      <!-- 题库表格 -->
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="220">
          </el-table-column>
          <!-- :formatter="formatQuestions" -->
          <el-table-column
            prop="questionType"
            label="题型"
            width="80"
            :formatter="formatQuestions"
          >
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template v-slot="{ row }">
              <el-link
                v-for="(item, index) in row.questionIDs"
                :key="index"
                class="blueLink"
                @click="questionDetail(item)"
                >{{ item.number }}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column label="操作" class="deleteColor" width="80">
            <template v-slot="{ row }">
              <el-button
                icon="el-icon-delete"
                circle
                type="danger"
                @click="listDelete(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <!-- 分页器 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="params.page"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="params.pagesize"
          layout=" prev, pager, next,sizes, jumper"
          :total="total"
        />
      </el-row>
    </el-card>
    <!-- :page-size="pagesize" -->
    <!-- 题目编号弹层 -->
    <ExaminationDialog
      :showExamination.sync="showExamination"
      :questionsDetailList="questionsDetailList"
      :questionType="questionType"
      :questionIDs="questionIDs"
    />
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from "@/api/hmmm/questions.js"; // 引入请求接口
import { questionType } from "@/api/hmmm/constants.js"; // 引入枚举文件---直接把这个对象引入了，可以直接使用，不需要在data里声明
import ExaminationDialog from "../components/examinationDialog.vue";
export default {
  components: {
    ExaminationDialog,
  },
  data() {
    return {
      tableData: [],
      params: {
        page: 1, // 当前页码
        pagesize: 20, // 每页条数
        keyword: "",
      },
      total: 0, // 总数
      // currentPage: 1,
      // questionType: questionType, // 题型的枚举
      searchId: "", // input框的值
      showExamination: false, // 控制dialog框显示
      questionsDetailList: {},
      questionType: "", // 题型，用来传给子组件
      questionIDs: 0,
    };
  },
  created() {
    // 调用请求组题列表的方法
    this.randoms();
  },
  methods: {
    // 封装请求组题列表的方法
    async randoms() {
      const res = await randoms(this.params);
      const { counts, items } = res.data;
      this.total = counts;
      this.tableData = items;
    },
    // currentPage 改变时会触发--当前页
    handleCurrentChange() {
      this.randoms();
    },
    // pageSize 改变时会触发--每页条数
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.randoms();
    },
    // 根据传入的row删除题目
    async listDelete(row) {
      try {
        await this.$confirm("此操作将永久删除该题组, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await removeRandoms(row); // 调用删除接口
        await this.randoms(); // 重新渲染页面
        this.$message.success("删除成功"); // 提示信息
      } catch (error) {
        console.log(error);
      }
    },
    // 根据枚举文件判断题型
    formatQuestions(row) {
      const obj = questionType.find(
        (item) => item.value === Number(row.questionType)
      );
      this.questionType = obj?.label ? obj?.label : "未知";
      return obj?.label ? obj?.label : "未知";
    },
    // 清除input框的内容
    resetInput() {
      this.searchId = ""; // 清除input框的内容
      this.params.page = 1;
      this.params.pagesize = 20;
      this.params.keyword = "";
      this.randoms(this.params);
    },
    // 按照编号搜索对应的题组
    async searchById() {
      this.params.keyword = this.searchId; // 把搜索框的value值给keyword参数
      await this.randoms(); // 重新渲染页面
      // this.searchId = "";
    },
    //  题目详情弹层显示并传值渲染
    async questionDetail(item) {
      this.showExamination = true; // 打开弹层
      this.questionIDs = item.id;
      const res = await detail({ id: item.id }); // 发送请求获取题目详情
      this.questionsDetailList = res.data; // 用变量接收，父传子
      console.log(res.data);
    },
  },
};
</script>

<style scoped >
.grid-content {
  border-radius: 4px;
  min-height: 26px;
}
.bg-purple-dark {
  margin: 10px 0;
  padding: 5px 15px;
  color: #909399;
  background: #f4f4f5;
}
.totalSpan {
  font-size: 12px;
  margin-left: 10px;
}
.bg-purple {
  color: #606266;
  font-size: 14px;
  font-weight: 700;
  margin-right: 10px;
}
.blueLink {
  color: deepskyblue;
  /* text-decoration: none; */
}
</style>
